<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <!-- 顶部版心 -->
        <div class="content ">
            <!-- 左侧 -->
            <div class="top-left leftfix clearfix">
                <span class="welcome">尚品汇欢迎您</span>
                <span>请</span>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">免费注册</a>
            </div>
            <!-- 右侧  -->
            <ul class="list rightfix clearfix">
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的购物车</a></li>
                <li><a href="#">我的尚品汇</a></li>
                <li><a href="#">尚品汇会员</a></li>
                <li><a href="#">企业采购</a></li>
                <li><a href="#">关注尚品汇</a></li>
                <li><a href="#">合作招商</a></li>
                <li><a href="#">商家后台</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header">
        <div class="content clearfix">
            <div class="header-left leftfix">
                <img src="./img/logo.png">
            </div>
            <div class="header-right rightfix">
                <form>
                    <input type="text">
                    <button></button>
                </form>
            </div>
        </div>
    </div>
    <!-- 主导航 -->
    <div class="main-nav">
        <div class="content clearfix">
            <div class="goods leftfix">全部商品分类</div>
            <ul class="main-nav-list leftfix clearfix">
                <li><a href="#">尚品超市</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">买啥</a></li>
                <li><a href="#">尚品家电</a></li>
                <li><a href="#">尚品生鲜</a></li>
                <li><a href="#">PLUS会员</a></li>
                <li><a href="#">进口好物</a></li>
                <li><a href="#">品牌闪购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">五金商店</a></li>
            </ul>
        </div>
    </div>
    <!-- 主要内容区 -->
    <div class="main-content">
        <div class="content clearfix">
            <!-- 侧边栏 -->
            <div class="sidebar leftfix">
                <ul>
                    <li>
                        <a href="#">手机/运营商/数码</a>
                        <!-- 侧边栏二级导航 -->
                        <div class="second-menu">
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">音像</a></dt>
                                <dd><a href="#">音乐</a></dd>
                                <dd><a href="#">影视</a></dd>
                                <dd><a href="#">教育音像</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">英文原版</a></dt>
                                <dd><a href="#">少儿</a></dd>
                                <dd><a href="#">商务投资</a></dd>
                                <dd><a href="#">英语学习考试</a></dd>
                                <dd><a href="#">文学</a></dd>
                                <dd><a href="#">传记</a></dd>
                                <dd><a href="#">励志</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">文艺</a></dt>
                                <dd><a href="#">小说</a></dd>
                                <dd><a href="#">文学</a></dd>
                                <dd><a href="#">青春文学</a></dd>
                                <dd><a href="#">传记</a></dd>
                                <dd><a href="#">艺术</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">少儿</a></dt>
                                <dd><a href="#">胎教</a></dd>
                                <dd><a href="#">0-2岁</a></dd>
                                <dd><a href="#">3-6岁</a></dd>
                                <dd><a href="#">7-10岁</a></dd>
                                <dd><a href="#">11-14岁</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">人文社科</a></dt>
                                <dd><a href="#">历史</a></dd>
                                <dd><a href="#">哲学</a></dd>
                                <dd><a href="#">国学</a></dd>
                                <dd><a href="#">政治/军事</a></dd>
                                <dd><a href="#">法律</a></dd>
                                <dd><a href="#">人文社科</a></dd>
                                <dd><a href="#">心理学</a></dd>
                                <dd><a href="#">文化</a></dd>
                                <dd><a href="#">社会科学</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">经管励志</a></dt>
                                <dd><a href="#">经济</a></dd>
                                <dd><a href="#">金融与投资</a></dd>
                                <dd><a href="#">管理</a></dd>
                                <dd><a href="#">励志与成功</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">生活</a></dt>
                                <dd><a href="#">健康与保健</a></dd>
                                <dd><a href="#">家庭与育儿</a></dd>
                                <dd><a href="#">旅游</a></dd>
                                <dd><a href="#">烹饪美食</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">科技</a></dt>
                                <dd><a href="#">工业技术</a></dd>
                                <dd><a href="#">科普读物</a></dd>
                                <dd><a href="#">建筑</a></dd>
                                <dd><a href="#">医学</a></dd>
                                <dd><a href="#">科学与自然</a></dd>
                                <dd><a href="#">计算机与互联网</a></dd>
                                <dd><a href="#">电子通信</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">教育</a></dt>
                                <dd><a href="#">中小学教辅</a></dd>
                                <dd><a href="#">教育与考试</a></dd>
                                <dd><a href="#">外语学习</a></dd>
                                <dd><a href="#">大中专教材</a></dd>
                                <dd><a href="#">科学与自然</a></dd>
                                <dd><a href="#">字典词典</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">艺术与收藏</a></dt>
                                <dd><a href="#">经济管理</a></dd>
                                <dd><a href="#">文化与艺术</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">其他</a></dt>
                                <dd><a href="#">工具书</a></dd>
                                <dd><a href="#">杂志期刊</a></dd>
                                <dd><a href="#">套装书</a></dd>
                                <dd><a href="#">打折图书</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">电脑/办公</a></li>
                    <li><a href="#">家具/家居/家装/厨具</a></li>
                    <li><a href="#">男装/女装/童装/内衣</a></li>
                    <li><a href="#">美妆/个护清洁/宠物</a></li>
                    <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
                    <li><a href="#">男鞋/运动/户外</a></li>
                    <li><a href="#">房产/汽车/汽车用品</a></li>
                    <li><a href="#">母婴/玩具乐器</a></li>
                    <li><a href="#">食品/酒类/生鲜/特产</a></li>
                    <li><a href="#">艺术/礼品鲜花/农资绿植</a></li>
                    <li><a href="#">医药保健/计生情趣</a></li>
                    <li><a href="#">图书/文娱/教育/电子书</a></li>
                    <li><a href="#">机票/酒店/旅游/生活</a></li>
                    <li><a href="#">众筹/白条/保险/企业金融</a></li>
                    <li><a href="#">安装/维修/清洗/二手</a></li>
                </ul>
            </div>
            <!-- 主图 -->
            <div class="main-pic leftfix">
                <img src="./img/banner主图.png" alt="">
            </div>
            <!-- 右侧 -->
            <div class="main-right leftfix">
                <!-- 尚品快报 -->
                <div class="quick-paper">
                    <div class="paper-top clearfix">
                        <span class="leftfix">尚品快报</span>
                        <a href="#" class="rightfix">更多&gt;</a>
                    </div>
                    <ul class="paper-foot">
                        <li><a href="#">[特惠]毛衣+直筒裤，才是YYDS</a></li>
                        <li><a href="#">[特惠]毛衣+直筒裤，才是YYDS</a></li>
                        <li><a href="#">[特惠]毛衣+直筒裤，才是YYDS</a></li>
                        <li><a href="#">[特惠]毛衣+直筒裤，才是YYDS</a></li>
                    </ul>
                </div>
                <!-- 右侧下方精灵图 -->
                <div class="paper-other">
                    <ul class="other-first clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-second clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-third clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 秒杀专场 -->
    <div class="seckill">
        <div class="content clearfix">
            <img src="./img/seckill.png" alt="">
            <img src="./img/banner1.png" alt="">
            <img src="./img/banner2.png" alt="">
            <img src="./img/banner3.png" alt="">
            <img src="./img/baner4.png" alt="">
        </div>
    </div>
    <!-- 家用电器 -->
    <div class="electric-appliance">
        <div class="content">
            <!-- 头部导航 -->
            <div class="top-nav clearfix">
                <span class="leftfix">家用电器</span>
                <ul class="rightfix">
                    <li><a href="#">热门</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">厨房电器</a></li>
                    <li><a href="#">应季电器</a></li>
                    <li><a href="#">空气/净水</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
            <!-- 下半部分 -->
            <div class="floor-bottom clearfix">
                <div class="item1 leftfix">
                    <ul class="clearfix">
                        <li>节能补贴</li>
                        <li>4K电视</li>
                        <li>空气净化器</li>
                        <li>IH电饭煲</li>
                        <li>滚筒洗衣机</li>
                        <li>电热水器</li>
                    </ul>
                    <img src="./img/编组.png" alt="">
                </div>

                <div class="item2 leftfix">
                    <img src="./img/appliance_banner07.png" alt="全球购">
                </div>
                <div class="item3 leftfix">
                    <img src="./img/微波炉.png" alt="微波炉">
                    <img src="./img/空气炸锅.png" alt="空气炸锅">
                </div>
                <div class="item4 leftfix">
                    <img src="./img/冰箱.png" alt="">
                </div>
                <div class="item5 leftfix">
                    <img src="./img/电饭煲.png" alt="">
                    <img src="./img/电饭煲2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 家用电器 -->
    <div class="electric-appliance">
        <div class="content">
            <!-- 头部导航 -->
            <div class="top-nav clearfix">
                <span class="leftfix">家用电器</span>
                <ul class="rightfix">
                    <li><a href="#">热门</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">厨房电器</a></li>
                    <li><a href="#">应季电器</a></li>
                    <li><a href="#">空气/净水</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
            <!-- 下半部分 -->
            <div class="floor-bottom clearfix">
                <div class="item1 leftfix">
                    <ul>
                        <li>节能补贴</li>
                        <li>4K电视</li>
                        <li>空气净化器</li>
                        <li>IH电饭煲</li>
                        <li>滚筒洗衣机</li>
                        <li>电热水器</li>
                    </ul>
                    <img src="./img/编组.png" alt="">
                </div>

                <div class="item2 leftfix">
                    <img src="./img/appliance_banner07.png" alt="全球购">
                </div>
                <div class="item3 leftfix">
                    <img src="./img/微波炉.png" alt="微波炉">
                    <img src="./img/空气炸锅.png" alt="空气炸锅">
                </div>
                <div class="item4 leftfix">
                    <img src="./img/冰箱.png" alt="">
                </div>
                <div class="item5 leftfix">
                    <img src="./img/电饭煲.png" alt="">
                    <img src="./img/电饭煲2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--页脚 -->
    <div class="footer">
        <div class="content">
            <!-- 上半部分 -->
            <div class="footer-top clearfix">
                <ul class="u u1">
                    <li>购物指南</li>
                    <li>购物流程</li>
                    <li>会员介绍</li>
                    <li>生活履行</li>
                    <li>常见问题</li>
                    <li>大家电</li>
                    <li>联系客服</li>
                </ul>
                <ul class="u u2">
                    <li>配送方式</li>
                    <li>上门自提</li>
                    <li>211限时自大</li>
                    <li>配送服务哈讯</li>
                    <li>配送自理费用</li>
                </ul>
                <ul class="u u3">
                    <li>支付方式</li>
                    <li>在线支付</li>
                    <li>货到付款</li>
                    <li>分期付款</li>
                    <li>公司转账</li>
                </ul>
                <ul class="u u4">
                    <li>售后服务</li>
                    <li>售后政策</li>
                    <li>价格保证</li>
                    <li>退款生命</li>
                    <li>返货修或退还</li>
                    <li>取消订单</li>
                </ul>
                <ul class="u u5">
                    <li>特色服务</li>
                    <li>夺宝岛</li>
                    <li>DIY装机</li>
                    <li>延保服务</li>
                    <li>京东E卡</li>
                    <li>京东通信</li>
                    <li>京东PLUS会员</li>
                </ul>
                <ul class="u u6">
                    <li>自营覆盖区域</li>
                    <li>净瓶尚品汇有7897区域</li>
                    <li>提供自配服务 货到付款</li>
                    <li>POS机</li>
                    <li>服务</li>
                    <li>详情</li>
                </ul>
            </div>
            <!-- 下半部分 -->
            <div class="footer-bottom">
                <ul class="clearfix">
                    <li><a href="">关于我们</a></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href="">联系客服</a></li>
                    <li><a href="">合作招商</a></li>
                    <li><a href="">商家帮助</a></li>
                    <li><a href="">营销中心</a></li>
                    <li><a href="">手机京东</a></li>
                    <li><a href="">友情连接</a></li>
                    <li><a href="">销售联盟</a></li>
                    <li><a href="">隐私政策</a></li>
                </ul>
                <span>京ICP备12465479879</span>
            </div>

        </div>
    </div>
    <div style="height: 2000px;">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>

</html>